<!-- 
      detail.html
      产品详细信息, id="detail"
      
      Created by tang on 2017-03-10.
      Copyright 2017 tang. All rights reserved.
 -->

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="../css/detail.css" />
</head>
<body class="white">
	<header class="mui-bar mui-bar-transparent short" style="width: 100%;">
	    <a class="mui-action-back mui-icon mui-pull-left bexta-white-back"><span></span></a>
	</header>
	
	<div class="mui-content mui-scroll-wrapper " id="onescroll" style="padding-bottom: 70px;">
		<div id="ner" class="mui-scroll">
		    <div class="mui-slider">
		    		 <div class="mui-slider-group">
		    		 	<div class="mui-slider-item"><a href="#"><img src="../img/lists.png" /></a></div>
		    		 	<div class="mui-slider-item"><a href="#"><img src="../img/lists.png" /></a></div>
		    		 	<div class="mui-slider-item"><a href="#"><img src="../img/lists.png" /></a></div>
		    		 	<div class="mui-slider-item"><a href="#"><img src="../img/lists.png" /></a></div>
		    		 	<div class="mui-slider-item"><a href="#"><img src="../img/lists.png" /></a></div>
		    		 </div>
		    		 <div class="mui-slider-indicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
				</div>
				<div id="share" class="fun-btn mui-pull-right"></div>
				<div id="collect" class="fun-btn mui-pull-right"></div>
		    </div>
		    <div class="mui-content-padded detail ">
				<div class="title afterborder">
					<div>唐叔</div>
				</div>
				<!--演员-->
				<div style="display: none;">
					<ul class="mui-table-view ">
					    <li class="mui-table-view-cell basic">
					        <div class="ts">基本信息</div>
					        <p class="mui-clearfix"><span class="mui-pull-right">男</span>性别</p>
							<p class="mui-clearfix"><span class="mui-pull-right">20-25</span>年龄段</p>
							<p class="mui-clearfix"><span class="mui-pull-right">175-180</span>身高段</p>
					    </li>
					</ul>
					<ul class="mui-table-view ">
					    <li class="mui-table-view-cell basic">
					        <div class="ts">个人标签</div>
					     	<div class="labels">
					     		<span>武术</span>
					     		<span>武术</span>
					     		<span>武术</span>
					     		<span>武术</span>
					     	</div>
					    </li>
					</ul>
				</div>
				<!--演员end-->
				<!--场地-->
				<div style="display: none;">
					<ul class="mui-table-view ">
					    <li class="mui-table-view-cell basic">
					        <div class="ts">场地信息</div>
					        <p class="mui-clearfix"><span class="mui-pull-right">会务中心</span>类型</p>
							<p class="mui-clearfix"><span class="mui-pull-right">800m²</span>面积</p>
							<p class="mui-clearfix"><span class="mui-pull-right">8m</span>层高</p>
							<p class="mui-clearfix"><span class="mui-pull-right">室内</span>落位区域</p>
					    </li>
					</ul>
					<ul class="mui-table-view ">
					    <li class="mui-table-view-cell basic">
					        <div class="ts">场地地址</div>
					        <p class="mui-clearfix">前海特区某楼某路88号整栋</p>
					    </li>
					</ul>
					<ul class="mui-table-view ">
					    <li class="mui-table-view-cell basic">
					        <div class="ts">配套设施</div>
					        <p class="labesa">
					        		<span>自然景观</span>
					        		<span>公关场所</span>
					        		<span>商业广场</span>
					        </p>
					    </li>
					</ul>
					<ul class="mui-table-view ">
					    <li class="mui-table-view-cell basic">
					        <div class="ts">配套设施</div>
					        <p class="labesa">
					        		<span>休息室</span>
					        		<span>化妆间</span>
					        		<span>网络WIFI</span>
					        		<span>货运电梯</span>
					        		<span>餐饮</span>
					        		<span>灯光</span>
					        </p>
					    </li>
					</ul>
				</div>
				<!--场地end-->
				<!--后期-->
				<div >
					<ul class="mui-table-view ">
					    <li class="mui-table-view-cell res">
					        <a class="mui-navigate-right" id="suit">套餐选择</a>
					        <div >
					       	 	套餐一：AAA+BBB+CCC
					        </div>
					    </li>
					</ul>
					<ul class="mui-table-view ">
					    <li class="mui-table-view-cell basic">
					        <div class="ts">工作类型</div>
					        <p class="labesa">
					        		<span>休息室</span>
					        		<span>化妆间</span>
					        		<span>网络WIFI</span>
					        		<span>货运电梯</span>
					        		<span>餐饮</span>
					        		<span>灯光</span>
					        </p>
					    </li>
					</ul>
					<ul class="mui-table-view ">
					    <li class="mui-table-view-cell basic">
					        <div class="ts">适用影片类型</div>
					        <p class="labesa">
					        		<span>休息室</span>
					        		<span>化妆间</span>
					        		<span>网络WIFI</span>
					        		<span>货运电梯</span>
					        		<span>餐饮</span>
					        		<span>灯光</span>
					        </p>
					    </li>
					</ul>
				</div>
				<!--后期end-->





				<ul class="mui-table-view ">
				    <li class="mui-table-view-cell link" _id="comment" _title="用户评价" _href="comment.html" >
				        <a class="mui-navigate-right">
				        	<span class="mui-pull-right comes"><span>98%</span>好评</span>用户评价
				        </a>
				    </li>
				</ul>
				<div class="comment afterborder">
					<div class="score mui-clearfix">
						<div class="score_star mui-pull-left">
							<img src="../icon/icon_xingxing@2x.png" alt="" />
							<img src="../icon/icon_xingxing@2x.png" alt="" />
							<img src="../icon/icon_bankexin@2x.png" alt="" />
							<img src="../icon/icon_void@2x.png" alt="" />
							<img src="../icon/icon_void@2x.png" alt="" />
						</div>
					</div>
					<div class="text">
						第一次用租用，很好啊，第一次用租用，很好
						啊，第一次用租用，很好啊，第一次用租用，
						很好啊第一次用租用，很好啊，第一次
					</div>
					<div class="mui-row">
						<div class="mui-col-xs-3 mui-col-sm-3"><img src="../img/WechatIMG13.png" data-preview-src="" data-preview-group="1" alt="" /></div>
						<div class="mui-col-xs-3 mui-col-sm-3"><img src="../img/WechatIMG11.png" data-preview-src="" data-preview-group="1" alt="" /></div>
						<div class="mui-col-xs-3 mui-col-sm-3"><img src="../img/WechatIMG13.png" data-preview-src="" data-preview-group="1" alt="" /></div>
						<div class="mui-col-xs-3 mui-col-sm-3"><img src="../img/WechatIMG14.png" data-preview-src="" data-preview-group="1" alt="" /></div>
					</div>
				</div>
				<div class="merchant mui-clearfix afterborder">
					<img src="../img/WechatIMG12.png" alt="" />
					<div class="name">经纪人公司</div>
					
					<div class="mui-clearfix btn">
						<div class="mui-pull-left">
							<a href="javascript:void(0)">联系供应商</a>
						</div>
						<div class="mui-pull-left">
							<a href="javascript:void(0)">进入店铺</a>
						</div>
					</div>
				</div>
		    </div>
		    <div class="mui-content-padded detail detail-body">
	   		<div class="body-title">商品信息</div>
	   		<div class="body-content">
	   			EPIC-W 摄影机延续了 RED 将行业内领先的电影工具传达给大众的传统。EPIC-W 能以高达 30 fps 的速度捕捉 8K 全画幅动态画面、可生成超清的 3540万像素静态摄影，并提供超级 35 镜头的拍摄范围。此外，EPIC-W 还能够实现高达 30 fps 的 4K Apple ProRes 或 Avid DNxHD/HR、高达 120 fps 的 2K Apple ProRes 或 Avid DNxHD/HR 以及惊人的数据传输速度（高达 275 MB/s）
	   			<div class="body-list">
	   				<p>套餐内容：</p>
	   				<p>套餐一：AAA+BBB+CCC</p>
	   				<p>套餐二：AAA+BBB+CCC</p>
	   				<p>套餐三：AAA+BBB+CCC</p>
	   				<p>套餐四：AAA+BBB+CCC</p>
	   			</div>
	   			<img src="../img/53e35d6b4ba72.png" class="maximg" alt="" />
	   		</div>
	    </div>
		</div>
	</div>


<!--选择套装-->
<div id="select-suit" >
	<div class="close"><img src="../icon/x.png"  alt="" /></div>
	<div class="suit-head">
		<div class="product">
			<img src="../img/small.png" class="maximg" alt="" />
		</div>
		<div class="suit-title">
			<span>¥ 1200.00</span>
			<div>RED EPIC-W 套装</div>
		</div>
	</div>
	<div class="suit-body" style="position: relative;height: 100px;">
		
		<div class="mui-scroll-wrapper suit-body"  >
		    <div class="mui-scroll">
		        <div class="suit-bodu-tab">
		        	<p>套餐</p>
		        		<div class="mui-row">
		        			<div class="mui-col-xs-12 mui-col-sm-12"><span class="active">套餐一</span></div>
		        			<div class="mui-col-xs-12 mui-col-sm-12" ><span>套餐一</span></div>
		        			<div class="mui-col-xs-12 mui-col-sm-12" ><span>套餐一</span></div>
		        			<div class="mui-col-xs-12 mui-col-sm-12" ><span>套餐一</span></div>
		        			<div class="mui-col-xs-12 mui-col-sm-12" ><span>套餐一</span></div>
		        			<div class="mui-col-xs-12 mui-col-sm-12" ><span>套餐一</span></div>
		        			<div class="mui-col-xs-12 mui-col-sm-12" ><span>套餐一</span></div>
		        		</div>
		        </div>
		    </div>
		</div>
	</div>
	<div class="join-btn" >
		确认
	</div>
</div>

<!--加入租赁车-->
<div class="fixed-cart">
	<div class="mui-pull-right">
		<a href="javascript:void(0)" class="mui-btn bexta-btn bexta-btn-red join-cart">立即询价</a>
	</div>
	<!--有价-->
	<div class="count-money" style="display: none;">
		<span>¥1200每天</span>
		<div class="score mui-clearfix" style="margin:0;">
			<div class="score_star mui-pull-left">
				<img src="../icon/icon_xingxing@2x.png" alt="" />
				<img src="../icon/icon_xingxing@2x.png" alt="" />
				<img src="../icon/icon_bankexin@2x.png" alt="" />
				<img src="../icon/icon_void@2x.png" alt="" />
				<img src="../icon/icon_void@2x.png" alt="" />
			</div>
		</div>
	</div>
	<!--询价-->
	<div class="count-money" >
		<div class="score mui-clearfix" style="margin:0;height: 20px;overflow: hidden;">
			<div class="score_star mui-pull-left">
				<img src="../icon/icon_xingxing@2x.png" alt="" />
				<img src="../icon/icon_xingxing@2x.png" alt="" />
				<img src="../icon/icon_bankexin@2x.png" alt="" />
				<img src="../icon/icon_void@2x.png" alt="" />
				<img src="../icon/icon_void@2x.png" alt="" />
			</div>
		</div>
		<p style="margin-bottom: 0;font-size: 11px;color: #666;">101条评论</p>
	</div>
</div>
	
<script src="../js/mui.js"></script>
<script src="../js/mui.extend.js"></script>
<script src="../js/mui.pullToRefresh.js"></script>
<script src="../js/mui.pullToRefresh.material.js"></script>
<script src="../js/mui.zoom.js"></script>
<script src="../js/mui.previewimage.js"></script>
<script src="../js/bexta.js"></script>
<script type="text/javascript">
	mui.init();
	 mui.ready(function () {
	 	var gallery = mui('.mui-slider');
			gallery.slider({
			  interval:3000			//自动轮播周期，若为0则不自动播放，默认为0；
			});
			
		mui.previewImage();
		
		
		//套餐选择
		var wh = window.innerHeight;
		document.querySelector('.suit-body').style.height = wh*0.45-(88+50) + 'px';
		mui('#select-suit .mui-scroll-wrapper').scroll({
			deceleration: 0.0005 
		});
		var mask = null;
		mui('body').on('tap', '#suit', function() {
			var suit = document.querySelector('#select-suit'),
				scr = document.querySelector('body');
			mask = mui.createMask(function(){
				suit.classList.remove('run');
				scr.classList.remove( 'run' );
				function s() {
					suit.style.display = 'none';
					suit.removeEventListener('webkitTransitionEnd', s);
				}
				suit.addEventListener('webkitTransitionEnd', s);
			});
			mask.show();
			suit.style.display= 'block';
			setTimeout(function(){
				scr.classList.add( 'run' );
				suit.classList.add('run');
			});
		});
		mui('body').on('tap', '.close', function(){
			mask.close();
		});
		//套餐选择 --- end
		//->进入订单确认
		mui('body').on('tap', '.join-btn', function() {
			mask.close();
		});
		//->进入评论
		//日历
//		mui('body').on('tap', '.join-btn', function(){
//			mui.openWindow({
//				url:"calendar.html",
//				id:"calendar",
//				extras:{type:'detail'},
//				show:{autoShow:true,aniShow:'slide-in-bottom'}
//			})
//		});
		
	});
	
	;(function($) {
		var loadTager = 0;
		var deceleration = mui.os.ios?0.003:0.0009;
		var scroll = $('#onescroll.mui-scroll-wrapper').scroll({
			bounce: false,
			indicators: true, //	是否显示滚动条
			deceleration:deceleration
		});
		mui('.mui-bar-transparent').transparent2({
			scroll:scroll,
   			offset:300,
   			bgr:true,
	   		success:function(obj, opa){
	   			var backbtn = obj.element.querySelector('.bexta-white-back');
	   			if( opa > 0.3 ){
	   				backbtn.classList.add('bexta-drak-back');
	   			}else{
	   				backbtn.classList.remove('bexta-drak-back')
	   			}
	   		}
	   	});
		mui('#ner.mui-scroll').pullToRefresh({
			up: {
				offset:1,
				contentinit:"<span class='logn'></span> 上拉查看图文详情",
				contentdown:"<span class='logn'></span> 上拉查看图文详情",
				contentrefresh:"<span class='logn'></span> 正在获取图文信息",
				contentnomore:null,
				callback: function() {
					var self = this;
					var body = document.querySelector('.detail-body');
					setTimeout(function(){
						body.style.display = 'block';
						body.classList.add('run');
						self.endPullUpToRefresh(true);
						mui('.mui-pull-bottom-tips')[0].style.display = 'none';
						mui('#onescroll').scroll().scrollTo(0,-(body.getBoundingClientRect().top ),500);
					},1000);
				}
			}
		});
	})(mui);
	
	
</script>
</body>
</html>